<template>
  <div class="login-background">
    <div class="login-box">

      <el-row class="login-row1">
        <el-text tag="b" class="login-title">
          特药配送管理系统
        </el-text>
      </el-row>
      <el-divider/>
      <el-row>
        <el-col :span="10">
          <el-card class="login-img">
          </el-card>
        </el-col>
        <el-col :span="14">
          <el-form label-width="100px" class="login-form">
            <el-form-item>
              <el-input
                  v-model="data.user.username"
                  maxlength="10"
                  placeholder="请输入用户名">
                <template #prepend>
                  <el-icon>
                    <User/>
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="data.user.password"
                        maxlength="10"
                        placeholder="请输入密码" show-password>
                <template #prepend>
                  <el-icon>
                    <Lock/>
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <div style="display:flex; justify-content:center">
                <el-input v-model="data.admin.verCode"
                          style="width: 200px; margin-right: 10px "
                          placeholder="请输入验证码">
                  <template #prepend>
                    <el-icon>
                      <CircleCheck/>
                    </el-icon>
                  </template>
                </el-input>
                <img :src="data.captcharUrl" width="140px" height="33px" @click="NewCapt">
              </div>
            </el-form-item>
            <el-form-item>
              <el-link class="register" :underline="false" @click="btnRegisterClick"><u>注册账号</u></el-link>
            </el-form-item>
            <el-form-item>
              <el-button class="login-button" @click="LoginClick">登录</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
  <el-dialog
      v-model="data.dialog.dialogVisible"
      :title="data.dialog.dialogTitle"
      width="500"
      :before-close="handleClose"
  >
    <el-form :label-width="80">
      <el-form-item label="用户名">
        <el-input style="width: 250px"
                  maxlength="10"
                  v-model="data.dialog.user.username"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input style="width: 250px"
                  maxlength="10"
                  v-model="data.dialog.user.password" show-password></el-input>
      </el-form-item>
      <el-form-item label="确认密码">
        <el-input style="width: 250px"
                  maxlength="10"
                  v-model="data.dialog.user.secondPassword" show-password></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input style="width: 250px"
                  maxlength="11"
                  v-model="data.dialog.user.phone"></el-input>
      </el-form-item>

    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="data.dialog.dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogConfirm">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from "vue";
import axios from "axios";
import router from "@/router";
import {ElMessage} from "element-plus";


onMounted(() => {
  NewCapt();
})


//刷新验证码
const NewCapt = () => {
  data.uuid = Math.random();
  data.captcharUrl = "http://localhost:8080/getCaptcha?uuid=" + data.uuid;
}

const data = reactive({
  uuid: Math.random(),//验证码的UUid
  captcharUrl: "",
  admin: {
    verCode: ""
  },
  user: {
    username: "",
    password: ""
  },
  date: {
    day: new Date().getDate(),
    month: new Date().getMonth() + 1
  },
  dialog: {
    dialogVisible: false,
    user: {
      username: "",
      password: "",
      phone: "",
      secondPassword: "",
      roleId: 11
    },
    dialogTitle: ""
  }
})
//初始化用户信息
let initUser = () => {
  data.dialog.user.username = "",
      data.dialog.user.password = "",
      data.dialog.user.phone = "",
      data.dialog.user.secondPassword = ""
  data.dialog.user.roleId = 11
}
//注册按钮
let btnRegisterClick = () => {
  initUser();
  data.dialog.dialogTitle = "注册"
  data.dialog.dialogVisible = true;
}
//成功消息
const successMessage = (message: any) => {
  ElMessage({
    showClose: true,
    message: message,
    type: 'success',
  });
}
//失败消息
const errorMessage = (message: any) => {
  ElMessage({
    showClose: true,
    message: message,
    type: 'error',
  });
}
//注册确认
let dialogConfirm = () => {
  if (data.dialog.dialogTitle == "注册" && data.dialog.user.password == data.dialog.user.secondPassword) {
    console.log(data.dialog.user);
    axios({
      url: "http://localhost:8080/user/register",
      method: "post",
      params: data.dialog.user
    }).then((res) => {
      if (res.data.success) {
        successMessage("注册成功")
      } else {
        errorMessage(res.data.msg);
      }
    })
  } else {
    errorMessage("两次密码输入不一致，注册失败")
  }
  data.dialog.dialogVisible = false;
}
//登录确认
let LoginClick = () => {
  axios({
    url: "http://localhost:8080/user/login",
    method: "get",
    params: {
      username: data.user.username,
      password: data.user.password,
      uuid: data.uuid,
      code: data.admin.verCode
    }
  }).then((res) => {
    if (res.data.success) {
      sessionStorage.setItem("userId", res.data.data.userId);
      LoginByRole(res.data.data.roleId);
    } else {
      errorMessage(res.data.msg);
      router.push("/login");
      NewCapt();
    }
  })
}

//根据不同角色ID登录不同页面
const LoginByRole = (roleId: number) => {
  if (roleId == 11) {
    router.push("/return/clientHome/myOrder");
  } else {
    if (roleId == 12) {
      router.push("/driver/MyOrder");
    } else {
      router.push("/home");
    }
  }
}
</script>

<style scoped>
@import '../../css/login/Login.css';
</style>